<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="__STATIC__/css/bootstrap.min.css">

    <style>
        .main{
            width: 400px;
            margin:150px auto;
        }
    </style>
</head>
<body>

<div class="main">
    <div class="panel panel-default">
        <div class="panel-heading">登录界面</div>
        <div class="panel-body">
            <form action="">
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input id="username" type="text" class="form-control" placeholder="请输入用户名">
                </div>

                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="text" id="password" class="form-control" placeholder="请输入密码">
                </div>

                <div class="form-group">
                    <label for="code">验证码:</label>
                    <div class="clearfix">
                        <div class="col-md-4" style="padding-left: 0px;"><input type="text" id="code" class="form-control " placeholder="请输入验证码"></div>
                        <div class="col-md-8"><img src="{:url('login/verify')}" alt="" class="verify"></div>
                    </div>
                </div>

                <button class="btn btn-primary">登录</button>
            </form>
        </div>
    </div>
</div>


<script src="__STATIC__/js/jquery.min.js"></script>
<script src="__STATIC__/js/bootstrap.min.js"></script>


<script>
    $(function(){
        $('.verify').click(function(){

            var src = $(this).attr('src');
            var m = src.split('?');
            var src = m[0] + '?' + Math.random();
            $(this).attr('src', src);

        })
    })
</script>
</body>
</html>